<template>
    <div>
        <div style="background-color: #f0f8ff; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #2196F3;">
            <h3 style="color: #1976D2; margin-top: 0;">💡 技术解释：计算属性 vs 方法</h3>
            <p><strong>计算属性 (Computed)：</strong>基于响应式依赖进行缓存，只有当依赖的数据发生变化时才会重新计算。适用于复杂的数据处理逻辑，性能更优。</p>
            <p><strong>方法 (Methods)：</strong>每次调用都会重新执行，不会缓存结果。适用于事件处理和需要每次都执行的操作。</p>
            <p><strong>侦听器 (Watch)：</strong>用于监听数据变化并执行副作用操作，如API调用、数据验证等。</p>
            <h4 style="color: #1976D2;">计算属性的优势：</h4>
            <ul>
                <li><strong>缓存机制：</strong>计算属性基于它们的依赖进行缓存，只有在依赖发生改变时，计算属性才会重新计算。</li>
                <li><strong>性能优化：</strong>相比于直接在模板中编写复杂的表达式，计算属性提供了更好的代码可读性和维护性。</li>
                <li><strong>响应式更新：</strong>计算属性是响应式的，当依赖的数据发生变化时，计算属性会自动更新。</li>
            </ul>
        </div>
        <div style="margin-bottom: 20px;">
            <h4 style="color: #1976D2;">示例数据：</h4>
            <p>姓氏: {{ firstName }}</p>
            <p>名字: {{ lastName }}</p>
            <button @click="changeName" style="margin-bottom: 15px; padding: 8px 16px; background-color: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">
                更改姓名
            </button>
        </div>
        <div style="margin-bottom: 20px;">
            <h4 style="color: #1976D2;">计算属性 vs 方法：</h4>
            <p>计算属性：{{ fullName }}</p>
            <p>方法： {{ getFullName() }} </p>
        </div>
        <div style="margin-bottom: 20px;">
            <h4 style="color: #1976D2;">更多计算属性示例：</h4>
            <p>姓名长度（计算属性）：{{ fullNameLength }}</p>
            <p>姓名大写（计算属性）：{{ fullNameUppercase }}</p>
        </div>
    </div>
</template>
<script>
import { computed } from 'vue';

export default{
    data(){
        return {
            firstName: 'John',
            lastName: 'Doe'
        };
    },
    computed:{
        fullName() {
            return this.firstName + ' ' + this.lastName;
        },
        fullNameLength() {
            return this.fullName.length;
        },
        fullNameUppercase() {
            return this.fullName.toUpperCase();
        }
    },
    methods:{
        getFullName(){
            return this.firstName + '  getfullname   ' + this.lastName;
        },
        changeName() {
            // 随机更换姓名
            const firstNames = ['Alice', 'Bob', 'Charlie', 'David', 'Eva'];
            const lastNames = ['Smith', 'Johnson', 'Brown', 'Davis', 'Miller'];
            
            this.firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
            this.lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
        }
    },
    watch:{
        fullName(newValue, oldValue){
            // 进行一些操作
            console.log('Full name changed from', oldValue, 'to', newValue);
        }
    }
};

</script>